<!--
┌─┐┬ ┬┌─┐┬ ┬┌┐┌┌─┐┌─┐┌┐┌┌─┐ ┌─┐┌─┐┌┬┐
└─┐├─┤├─┤││││││┌─┘├┤ ││││ ┬ │  │ ││││
└─┘┴ ┴┴ ┴└┴┘┘└┘└─┘└─┘┘└┘└─┘o└─┘└─┘┴ ┴
-->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="https://staticfile.qnssl.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/balloon-css/0.4.0/balloon.min.css" />
    <title>啊呦，404了！</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header id="header">
        <div id="menu">
            <div id="menu-logo">
                <h1 id="logo">
                    <a href="">诗酒趁年华</a>
                </h1>
            </div>
            <nav id="menu-main">
                <ul>
                    <li>
                        <a href="#"><i class="fa fa-home"></i> 主页</a>
                    </li>
                    <li>
                        <a href=""><i class="fa fa-map-o"></i> 分类</a>
                    </li>
                    <li>
                        <a href=""><i class="fa fa-clock-o"></i> 归档</a>
                    </li>
                    <li>
                        <a href=""><i class="fa fa-link"></i> 友链</a>
                    </li>
                    <li>
                        <a href=""><i class="fa fa-info-circle"></i> 关于</a>
                    </li>
                    <li>
                        <a href="https://www.baidu.com"> 监控</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <div id="main">
        <div class="left">
            <ul class="posts-list">
                <li>
                    <article class="art">
                        <span class="round-category">
                            <img src="img/tuding.png" alt="我是一个图钉(*^__^*)">
                            <div class="round-category-n">大新闻</div>
                        </span>
                        <div class="art-pic">
                            <!-- <img src="http://on85xlk7u.bkt.clouddn.com/63065812_p0.jpg" alt=""> -->
                            <img src="img/63515346_p0.png" alt="">
                        </div>
                        <div class="art-main">
                            <h3 class="art-title">
                                <a href="">这个是文章的题目</a>
                            </h3>
                            <div class="art-info">
                                <span class="art-info-author">
                                    <i class="fa fa-user"></i>
                                    Shawn
                                </span>
                                 •
                                <span class="art-info-date">
                                    <i class="fa fa-calendar"></i>
                                    2017-8-3
                                </span>
                                 •
                                <span class="art-info-view">
                                    <i class="fa fa-eye"></i>
                                    10000
                                </span>
                                 •
                                <span class="art-info-comment">
                                    <i class="fa fa-commenting-o"></i>
                                    10000
                                </span>
                            </div>
                            <div class="art-intro">
                                这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍这边是文章的一些介绍
                            </div>
                            <div class="text-right">
                                <span class="art-info-readmore">
                                    <a href="">
                                        继续阅读 <i class="fa fa-angle-double-right"></i>
                                    </a>
                                </span>
                            </div>

                        </div>
                    </article>
                </li>
                <li>
                    <article class="art">
                        <div class="shuoshuo">
                            <img src="img/kotori-v3-min.jpg" alt="">
                            <h4>kissshot</h4>
                            <p>清真才是最好的！<br/>清真才是最好的！<br/>清真才是最好的！<br/>清真才是最好的！<br/></p>
                            <span class="shuoshuo-info">
                                <i class="fa fa-clock-o"></i>
                                2017-8-3
                                 •
                                <i class="fa fa-commenting-o"></i>
                                10000
                            </span>
                        </div>
                    </article>
                </li>


                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="right">
            <section class="art">
                <div class="catch-me">
                    <div>
                        <a data-balloon="Rss" data-balloon-pos="up" target="_blank" href="https://shawnzeng.com/feed"><i class="fa fa-rss"></i></a>
                        <a data-balloon="微博" data-balloon-pos="up" target="_blank" href="http://weibo.com/shawnzeng1996" class="external" rel="nofollow"><i class="fa fa-weibo"></i></a>
                        <a data-balloon="GitHub" data-balloon-pos="up" target="_blank" href="https://github.com/ZengShuai1996" class="external" rel="nofollow"><i class="fa fa-github"></i></a>
                        <a data-balloon="QQ群号:297350726" data-balloon-pos="up" target="_blank" href="https://jq.qq.com/?_wv=1027&k=44nyJOX" class="external" rel="nofollow"><i class="fa fa-qq"></i></a>
                        <a data-balloon="Email" data-balloon-pos="up" target="_blank" href="mailto:admin@shawnzeng.com" class="external" rel="nofollow"><i class="fa fa-envelope"></i></a>
                        <a data-balloon="知乎" data-balloon-pos="up" target="_blank" href="https://www.zhihu.com/people/shawn_zeng/activities" class="external" rel="nofollow"><i  class="fa" style="font-weight: 500;">知</i></a>
                    </div>
                </div>
            </section>
            <section class="art">
                <header class="art-widget-header">
                    <h3>Archives</h3>
                </header>
                <ul class="art-widget-sidebar">
                    <li><a href="">January 20101</a></li>
                    <li><a href="">December 2009</a></li>
                    <li><a href="">Novemeber 2009</a></li>
                    <li><a href="">October 2009</a></li>
                    <li><a href="">September 2009</a></li>
                    <li><a href="">August 2009</a></li>
                </ul>
            </section>
        </div>
    </div>
    <div id="foot">
        <span id="span_dt_dt"></span>
    </div>
    <footer>
        <script type="text/javascript" src="js/footer.js"></script>
    </footer>
</body>

</html>
